<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Price Tables</title>

        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/demo.css">
        <link rel="stylesheet" href="css/price-tables.css">

        <script type="text/javascript" src="js/html5shiv.js"></script>

    </head>
    <body>

    	<div class="wrapper">
    		
    		<div class="price-table four-columns hover">
    			<div class="column">
    				<header class="green rounded">
    					<h4>Small</h4>
    					<div class="price">
    						<span class="price">
    							<span class="dollar">$</span>
    							9
    							<span class="month">/mo</span>
    						</span>
    					</div>
    				</header>
    				<div class="data">
    					<ul>
    						<li class="odd"><strong><a href="#" rel="tooltip" title="Nothing is free.">Free</a></strong> Setup</li>
    						<li class="even"><strong>1GB</strong> Storage</li>
    						<li class="odd"><strong>10GB</strong> Bandwidth</li>
    						<li class="even"><strong>5</strong> Workers</li>
    						<li class="odd"><strong>1</strong> Domain</li>
    						<li class="even"><strong>Email</strong> Support</li>
    					</ul>
    				</div>
    				<footer>
    					<a href="#" class="button grey-button">Sign up!</a>
    				</footer>
    			</div>
    			<div class="column highlight">
    				<header class="pink rounded">	
    					<h4>Medium</h4>
    					<div class="price">
    						<span class="price">
    							<span class="dollar">$</span>
    							29
    							<span class="month">/mo</span>
    						</span>
    					</div>
    				</header>
    				<div class="data">
    					<ul>
    						<li class="odd"><strong>Free</strong> Setup</li>
    						<li class="even"><strong>10GB</strong> Storage</li>
    						<li class="odd"><strong><a href="#" rel="tooltip" title="100GB is a lot.">100GB</a></strong> Bandwidth</li>
    						<li class="even"><strong>10</strong> Workers</li>
    						<li class="odd"><strong>2</strong> Domain</li>
    						<li class="even"><strong>Email</strong> Support</li>
    					</ul>
    				</div>
    				<footer>
    					<a href="#" class="button grey-button">Sign up!</a>
    				</footer>
    			</div>
    			<div class="column">
    				<header class="purple rounded">	
    					<h4>Large</h4>
    					<div class="price">
    						<span class="price">
    							<span class="dollar">$</span>
    							39
    							<span class="month">/mo</span>
    						</span>
    					</div>
    				</header>
    				<div class="data">
    					<ul>
    						<li class="odd"><strong>Free</strong> Setup</li>
    						<li class="even"><strong>100GB</strong> Storage</li>
    						<li class="odd"><strong>1000GB</strong> Bandwidth</li>
    						<li class="even"><strong><a href="#" rel="tooltip" title="What's a worker?">25</a></strong> Workers</li>
    						<li class="odd"><strong>5</strong> Domain</li>
    						<li class="even"><strong>24/7</strong> Support</li>
    					</ul>
    				</div>
    				<footer>
    					<a href="#" class="button grey-button">Sign up!</a>
    				</footer>
    			</div>
    			<div class="column">
    				<header class="red rounded">
    					<h4>X-Large</h4>
    					<div class="price">
    						<span class="price">
    							<span class="dollar">$</span>
    							199
    							<span class="month">/mo</span>
    						</span>
    					</div>
    				</header>
    				<div class="data">
    					<ul>
    						<li class="odd"><strong>Unlimited</strong> Setup</li>
    						<li class="even"><strong>Unlimited</strong> Storage</li>
    						<li class="odd"><strong>Unlimited</strong> Bandwidth</li>
    						<li class="even"><strong>Unlimited</strong> Workers</li>
    						<li class="odd"><strong><a href="#" rel="tooltip" title="Yes, UNLIMITED!">Unlimited</a></strong> Domain</li>
    						<li class="even"><strong>24/7</strong> Support</li>
    					</ul>
    				</div>
    				<footer>
    					<a href="#" class="button grey-button">Sign up!</a>
    				</footer>
    			</div>
    		</div>

    	</div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/tooltip.js"></script>
        <script type="text/javascript">
            $('a[rel=tooltip]').tooltip();
        </script>
    </body>
</html>
